<script setup lang="ts">
import { mockTable } from '@/mock'

const { columns, data, load } = mockTable(
  [
    'projectCode',
    'projectManager',
    'saleMan',
    'delivery',
    'saleDepartment',
    'part1',
    'part2',
  ],
  ['项目编码', '项目经理', '销售人员', '项目交付', '销售所属部门', '甲方名称', '乙方名称'],
)
</script>

<template>
  <div class="page-container">
    <ElTabs @tab-change="load">
      <ElTabPane label="基本信息" />
      <ElTabPane label="合同金额" />
      <ElTabPane label="汇款条件" />
      <ElTabPane label="计划工期" />
      <ElTabPane label="项目简报" />
      <ElTabPane label="项目进度" />
    </ElTabs>
    <ElTable
      :border="true"
      :stripe="true"
      :data="data"
    >
      <ElTableColumn
        v-for="item in columns"
        :key="item.property"
        v-bind="item"
      />
    </ElTable>
    <div class="pagination-container">
      <ElPagination
        layout="prev,pager,next,jumper,total"
        :total="data.length"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 0,
    "title": "项目进度",
  },
}
</route>
